<template>
  <div class="timeData">s
    <myMap :positions="points"
           @showInfo="showRight"
           :type="param"></myMap>
    // 地图点位搜索
    <mapSearch style="position:absolute;top: 0.48rem;left: 0.32rem;zIndex:102;"
               :positions="positions"></mapSearch>
    // 站点类型筛选
    <div class="state-type flex-c">
      <p class="ellipsis">
        <a-Checkbox :checked="weiState"
                    style="marginRight:0.1rem"
                    @click="weiState=!weiState" />微型空气站
      </p>
      <p class="ellipsis">
        <a-Checkbox :checked="smallState"
                    style="marginRight:0.1rem"
                    @click="smallState=!smallState" />小型空气站
      </p>
      <p class="ellipsis">
        <a-Checkbox :checked="comState"
                    style="marginRight:0.1rem"
                    @click="comState=!comState" />国控空气站
      </p>
    </div>
    // 参数选择
    <div class="params flex-c">
      <li v-for="(p, index) in params"
          @click="param=p.name"
          :class="{chosedParam:p.name===param}"
          :key="index">{{p.name}}</li>
    </div>
    <div class="sitInfo">
      <!-- 控制设备信息盒子显示隐藏的------------------------------------------------ -->
      <div class="togSitDetail"
           @click="showSit=!showSit"
           :class="{reseve:showSit===false}"
           v-if="sitDetail">
        <i class="iconfont icon-qianjin-copy"
           style="fontSize:0.3rem;"></i>
      </div>
      <!-- 显示等级层次的色彩--------------------------------------------------- -->
      <div class="paramRange">
        <img src="../../../assets/img/rang.png">
      </div>
      <!-- 设备信息盒子---------------------------------------------------------- -->
      <div class="sitDetail"
           v-show="showSit">
        <div class="sitDetail-header ellipsis">
          <div class="sitDetail-name flex-r"
               style="width:100%;">
            <h2>{{sitDetail.name}}</h2>
            <span>设备序列号：{{sitDetail.dname}}</span>
          </div>
          <p class="ellipsis">地址：{{sitDetail.address}}</p>
        </div>
        <!-- 控制设备空气参数值 -->
        <div class="showNum">
          <div>
            <div class="flex-r"
                 style="justifyContent:space-between;float:left">
              <h3>最新数据</h3>
              <span style="transform:scale(0.8);color:rgba(255,255,255,0.8);">(更新于2020.12.12 12:00)</span>
            </div>
            <p style="float:left;color:rgba(255,255,255,0.8);fontSize:0.12rem;">CO浓度单位为mg/m³ 其他浓度单位为μg/m³</p>
          </div>
          <div class="showNum-info flex-r"
               style="justifyContent:space-between;">
            <div class="showNum-info-left flex-r">
              <div>
                <p>AQI</p>
                <p>42</p>
              </div>
              <div>
                <p>首要污染物</p>
                <p>PM2.5</p>
              </div>
            </div>
            <div class="showNum-info-right flex-r"
                 style="justifyContent:flex-start;width:66%;">
              <div v-for="(param, index) in params"
                   :key="index">{{param.name}}：{{sitDetail[param.name]}}</div>
            </div>
          </div>
        </div>
        <mapChart :params="params"
                  :code="sitDetail.code"
                  v-if="sitDetail"></mapChart>
      </div>
    </div>
  </div>
</template>

<script>
import { stringTime } from '../../../common/js/commont.js'
import MixinWL from '../../../store/wl/mixinsWl.js'
import mapSearch from '../../../components/wl/mapSearch.vue'
import mapChart from '../../../components/wl/mapChart.vue'
import myMap from '../../../components/wl/myMap.vue'
export default {
  mixins: [MixinWL],
  components: {
    myMap,
    mapSearch,
    mapChart
  },
  data () {
    return {
      showSit: false,
      positions: null,
      weiState: false,
      smallState: true,
      comState: false,
      param: 'PM2.5',
      params: null,
      sitDetail: ''
    }
  },
  methods: {
    // 显示控制右边信心
    showRight (data) {
      this.showSit = true
      this.sitDetail = data
    },
    // 获取设备点位接口................................................一小时一次
    getMapinfo () {
      var ts = stringTime(new Date())
      var data = {
        account: window.localStorage.getItem('account'),
        token: window.localStorage.getItem('token'),
        ts
      }
      this.getMapInfo(data)
    }
  },
  created () {
    this.getMapinfo()
    this.timerId1 = setInterval(() => {
      this.getMapinfo()
    }, 1000 * 60 * 60)
  },
  watch: {
    MapInfoWL (value) {
      this.$nextTick(() => {
        this.positions = value.list
        this.params = value.paramslist
        var index, data
        this.params.forEach((item, i) => {
          if (item.name === 'AQI') {
            data = item
            index = i
          }
        })
        this.params.splice(index, 1)
        this.params.unshift(data)
      })
    }
  },
  computed: {
    // 根据站点筛选
    points () {
      var arr1 = []
      var arr2 = []
      var arr3 = []
      if (this.positions) {
        if (this.weiState) {
          arr1 = this.positions.filter(item => {
            return item.typename === '微型设备'
          })
        }
        if (this.smallState) {
          arr2 = this.positions.filter(item => {
            return item.typename === '小型设备'
          })
        }
        if (this.comState) {
          arr3 = this.positions.filter(item => {
            return item.typename === '国控设备'
          })
        }
      }
      return [...arr1, ...arr2, ...arr3]
    }
  }
}
</script>

<style lang="less" scoped>
.timeData {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  .state-type {
    position: absolute;
    padding: 0.12rem;
    top: 1.12rem;
    left: 0.32rem;
    width: 1.44rem;
    font-size: 0.12rem;
    height: 1.46rem;
    border-radius: 0.16rem;
    background: #405891;
    z-index: 99;
    justify-content: space-between;
    p {
      margin: 0;
      padding: 0;
      width: 100%;
      text-align: center;
      input {
        width: 0.2rem;
      }
    }
  }
  .params {
    position: absolute;
    top: 2.84rem;
    left: 0.32rem;
    width: 1.44rem;
    border-radius: 0.16rem;
    background: #405891;
    z-index: 99;
    justify-content: space-between;
    padding: 0.08rem;
    li {
      height: 0.4rem;
      width: 1.28rem;
      border-radius: 0.1rem;
      text-align: left;
      padding: 0 0.24rem;
      line-height: 0.4rem;
      cursor: pointer;
    }
    .chosedParam {
      background: #437ede;
    }
  }
  .sitInfo {
    color: white;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: flex-end;
    overflow: block;
    .togSitDetail {
      width: 0.6rem;
      height: 0.6rem;
      position: absolute;
      top: 50%;
      color: white;
      left: -0.8rem;
      background: rgba(0, 0, 0, 0.12);
      border: 1px solid rgba(0, 0, 0, 0.15);
      transform: tranlateY(-50%);
      border-radius: 50%;
      line-height: 0.6rem;
      text-align: center;
    }
    .togSitDetail:hover {
      color: red;
    }
    .reseve {
      transform: rotate(-180deg);
    }
    .sitDetail {
      position: relative;
      background: #405891;
      width: 5.86rem;
      height: 100%;
      .sitDetail-header {
        width: 100%;
        height: 1.02rem;
        padding: 0.24rem;
        background: #437ede;
        .sitDetail-name {
          h2 {
            color: white;
            font-size: 0.18rem;
          }
          span {
            font-size: 0.12rem;
          }
          justify-content: space-between;
        }
      }
      .showNum {
        padding: 0.24rem;
        font-size: 0.1rem;
        h3 {
          color: white;
          font-size: 0.18rem;
          margin: 0;
        }
        p {
          margin: 0;
        }
        .showNum-info {
          width: 100%;
          padding: 0rem 0;
          .showNum-info-left {
            width: 34%;
            justify-content: space-around;
            div {
              p {
                margin: 0.28rem 0;
                font-size: 0.16rem;
              }
              P:last-child {
                font-size: 0.24rem;
              }
              p:nth-child(3) {
                font-size: 0.24rem;
              }
            }
          }
          .showNum-info-right {
            flex-wrap: wrap;
            justify-content: space-between;
            div {
              text-align: center;
              width: 33.33%;
              margin: 0.18rem 0;
            }
          }
        }
      }
    }
    .paramRange {
      width: 2.5rem;
      height: 0.68rem;
      position: absolute;
      left: -2.74rem;
      bottom: 0.24rem;
      border-radius: 0.08rem;
      overflow: hidden;
      img {
        height: 100%;
      }
    }
  }
}
</style>
